import './index.css'
import * as THREE from 'three'
import {
    OrbitControls
} from 'three/examples/jsm/controls/OrbitControls'
import dat from 'dat.gui'
import vertexShader from './shader/vertexShader.glsl'
import fragmentShader from './shader/fragmentShader.glsl'

/**
 * Size
 */
const Size = {
    width: window.innerWidth,
    height: window.innerHeight
}

/**
 * Camera
 */
const camera = new THREE.PerspectiveCamera(75, Size.width / Size.height, 0.1, 100)
camera.position.z = 3
camera.position.y = 3

/**
 * Scene
 */
const scene = new THREE.Scene()

/**
 * Geometry
 */
const planeGeometry = new THREE.PlaneGeometry(2, 2, 128, 128)

/**
 * Debug
 */
const debugObject = {}
// color
debugObject.depthColor = '#0000ff'
debugObject.surfaceColor = '#8888ff'

/**
 * Matetrial
 */
const material = new THREE.ShaderMaterial({
    vertexShader,
    fragmentShader,
    uniforms: {
        // 高度
        uBigWavesElevation: {
            value: 0.2
        },
        // 频率 
        uBigWavesFrequency: {
            value: new THREE.Vector2(4.0, 1.5)
        },
        uTime: {
            value: 0
        },
        // 波浪速度 
        uBigWavesSpeed: {
            value: 0.75
        },
        // 颜色
        uDepthColor: {
            value: new THREE.Color(debugObject.depthColor)
        },
        uSurfaceColor: {
            value: new THREE.Color(debugObject.surfaceColor)
        },

        uColorOffset: {
            value: 0.25
        },
        uColorMultiplier: {
            value: 2
        }

    }
})


/**
 * plane
 */
const plane = new THREE.Mesh(planeGeometry, material)
plane.rotation.x = -Math.PI * 0.5
scene.add(plane)

/**
 * Renderer
 */
const canvas = document.querySelector('canvas.webgl')
const renderer = new THREE.WebGLRenderer({
    canvas
})
renderer.setSize(Size.width, Size.height)

/**
 * OrbitControls
 */
const controls = new OrbitControls(camera, canvas)
controls.enableDamping = true

/**
 * Update
 */
const clock = new THREE.Clock();
let elpasedTime = 0;
const tick = () => {
    elpasedTime = clock.getElapsedTime();
    material.uniforms.uTime.value = elpasedTime;

    controls.update();
    renderer.render(scene, camera)
    requestAnimationFrame(tick)
}
tick()


/**
 * Debug
 */
const gui = new dat.GUI()
gui.add(material.uniforms.uBigWavesElevation, 'value').min(0).max(1).step(0.001).name('uBigWavesElevation')
gui.add(material.uniforms.uBigWavesFrequency.value, 'x').min(0).max(10).step(0.001).name('uBigWavesFrequencyX')
gui.add(material.uniforms.uBigWavesFrequency.value, 'y').min(0).max(10).step(0.001).name('uBigWavesFrequencyY')
gui.add(material.uniforms.uBigWavesSpeed, 'value').min(0).max(2).step(0.001).name('uBigWavesSpeed')
gui.addColor(debugObject, 'depthColor').name('uDepthColor').onChange(() => {
    material.uniforms.uDepthColor.value.set(debugObject.depthColor)
})
gui.addColor(debugObject, 'surfaceColor').name('uSurfaceColor').onChange(() => {
    material.uniforms.uSurfaceColor.value.set(debugObject.surfaceColor)
})
gui.add(material.uniforms.uColorOffset,'value').min(0).max(1).step(0.001).name('uColorOffset')
gui.add(material.uniforms.uColorMultiplier,'value').min(0).max(1).step(0.001).name('uColorOffset')